<template>
  <div class="layoutCon">
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='newCount' :duration='3000' separator=','></countTo>
        <label>신규 일자리</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='count' :duration='3000' separator=','></countTo>
        <label>누적 일자리</label>
      </div>
    </div>
    <search-box type="jobSearch" @search="searchCallBack"></search-box>
    <div class="jobList minH" v-loading="pageConfig.loading&&pageConfig.page==1">
      <div class="kws">
        총 <b>{{curToThousands(totals)}}</b>건의 채용정보가 검색되었습니다.
      </div>
      <ul class="mt">
        <li v-for="(item,index) in searchData" :key="index">
          <div class="pic">
            <img src="@images/ico_job.png" alt="">
          </div>
          <div class="info">
            <label>{{item.companyName||item.user.company}}</label>
            <strong @click="showInfo(item.id,index)">{{item.title}}</strong>
            <p class="t">
              <template v-if="item.jobs[0]">
                {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
              </template>                  
            </p>
            <p>
              <template v-if="item.areas[0]">
              {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |  
              </template>
              {{item.deadline}} 마감
            </p>
            <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>            
          </div>
          <div class="bom">
            <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index)">자세히보기</a>
            <el-popconfirm
                v-if="item.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect(item,index)"
              >
                <a slot="reference" target="_self" href="javascript:;" class="btn ico_favo collect">찜하기</a>
            </el-popconfirm>  
            <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index)">찜하기</a>
          </div>
        </li>
      </ul>
      <div class="notSerData" v-if="!this.pageConfig.loading&&searchData.length==0">
        <img src="@images/ico_search_not.png" alt="">
        <strong>검색결과가 없습니다.</strong>
        <p>모든 단어의 철자가 올바른지 확인하거나 다른 키워드로 검색해보세요. </p>
      </div>
    </div>
    <div class="loadMore" v-if="!pageConfig.isAll">
      <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
    </div>
    <resume-card :cardParams="cardData" @changeCollect="changeCollect"></resume-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { jobOption, searchJob, myJobCollect } from '@/api';
import { toThousands, Local, removeNull } from "@/utils";
import countTo from 'vue-count-to'
import searchBox from '@/components/searchBox'
import resumeCard from '@/components/resumeCard'

export default {
  name:'',
  components:{countTo,searchBox,resumeCard},
  props:[],
  data(){
    return {
      searchData:[],
      newCount:0,
      count:0,
      allJobs:[],
      cardData:null,
      pageConfig:{
        page:1,
        per:20,
        loading:false,
        isAll:true
      },
      totals:0,
      frm:{},
      curIndex:null
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar']),
  },
  created(){
    let serData=Local.get('job_ser_data');
    if(serData){
      let _new=JSON.parse(JSON.stringify(serData.frm))
      if(Object.keys(_new).length !== 0){
        this.frm=removeNull(_new);
        this.searchJob();
      }          
    }
  },
  mounted(){},
  methods:{
    async searchJob(){
      if(this.frm.employeeSearch&&this.pageConfig.page==1){
        this.frm.employeeSearch=JSON.stringify(this.frm.employeeSearch)
      }
      if(this.frm.careerSearch&&this.pageConfig.page==1){
        this.frm.careerSearch=JSON.stringify(this.frm.careerSearch)
      }
      if(this.frm.salarySearch&&this.pageConfig.page==1){
        this.frm.salarySearch=JSON.stringify(this.frm.salarySearch)
      }
      if(this.frm.sourceSearch&&this.pageConfig.page==1){
        this.frm.sourceSearch=JSON.stringify(this.frm.sourceSearch)
      }      
      let _params={};
          _params=Object.assign({page:this.pageConfig.page,per:this.pageConfig.per},this.frm);
      this.pageConfig.loading=true;
      let res = await searchJob(_params);
      try {
        if(res.code==200){
          let _data=res.data.data;
          this.pageConfig.page+=1;
          this.searchData=this.searchData.concat(_data.data)
          this.newCount=res.data.newCount;
          this.count=res.data.count;
          this.totals=_data.total;
          !_data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
          this.pageConfig.loading=false;            
        }else{
          this.pageConfig.loading=false;  
        }        
      } catch (error) {
        this.pageConfig.loading=false;  
      }
    },
    loadMore(){
      !this.pageConfig.loading&&this.searchJob();
    },
    searchCallBack(data){    
      this.pageConfig.page=1;
      this.pageConfig.isAll=true;
      this.searchData=[];
      this.frm=data;
      !this.pageConfig.loading&&this.searchJob();
    },
    showInfo(id,index){
      this.curIndex=index
      this.cardData={
        isShow:true,
        id:id
      }
    },
    changeCollect(status){
      this.searchData[this.curIndex].collect=status;
    },
    async collect(obj,index){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myJobCollect({integrated_id:obj.id,status:_status});
      try {
        if(res.code==200){
          this.searchData[index].collect=_status;
        }        
      } catch (error) {}
    },
    closeCard(){
      this.showCard=false
    },
    curToThousands(v){
      return toThousands(v);
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/job.scss";
</style>